<template>
    <div>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-button type="primary" @click="addDialog = true">新增</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
            <el-table-column
            prop="name"
            label="菜单名字">
            </el-table-column>
            <el-table-column
            prop="perms"
            label="权限编码">
            </el-table-column>
            <el-table-column
            prop="path"
            label="路径">
            </el-table-column>
            <el-table-column
            prop="icon"
            label="图标">
            </el-table-column>
            <el-table-column
            prop="type"
            label="类型">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type === 1">目录</el-tag>
                    <el-tag v-else-if="scope.row.type === 2" type="success">菜单</el-tag>
                    <el-tag v-else-if="scope.row.type === 3" type="warning">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column
            label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="getMenuInfo(scope.row.id)">编辑</el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button type="text" @click="delMenu(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增菜单" :visible.sync="addDialog" :append-to-body="true" :close-on-click-modal="false" width="500px">
            <el-form :model="addForm" :rules="rules" ref="addForm">
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="parentId">
					<el-select v-model="addForm.parentId" filterable @change="addMonitor" placeholder="请选择上级菜单" style="width: 100%">
                        <el-option label="目录" value="0"></el-option>
						<template v-for="item in tableData">
							<el-option :label="item.name" :value="item.id"></el-option>
							<template v-for="child in item.child">
								<el-option :label="child.name" :value="child.id">
									<span>{{ " - " + child.name }}</span>
								</el-option>
							</template>
						</template>
					</el-select>
				</el-form-item>
                <el-form-item label="菜单名字" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="addForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限编码" :label-width="formLabelWidth" prop="perms">
                    <el-input v-model="addForm.perms" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="路径" :label-width="formLabelWidth" prop="path">
                    <el-input v-model="addForm.path" placeholder="一级菜单必须要填此项，否则不显示" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
                    <el-input v-model="addForm.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
                    <el-select v-model="addForm.type" placeholder="请选择类型" :disabled="flag" style="width: 100%" @change="addHandleChange">
                        <el-option label="目录" value="1">目录</el-option>
                        <el-option label="菜单" value="2">菜单</el-option>
                        <el-option label="按钮" value="3">按钮</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="addMenu()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="编辑菜单" :visible.sync="editDialog" :append-to-body="true" :close-on-click-modal="false" width="500px">
            <el-form :model="editForm" :rules="rules" ref="editForm">
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="parentId">
					<el-select v-model="editForm.parentId" filterable placeholder="请选择上级菜单" style="width: 100%">
                        <el-option label="目录" value="0"></el-option>
						<template v-for="item in tableData">
							<el-option :label="item.name" :value="item.id"></el-option>
							<template v-for="child in item.child">
								<el-option :label="child.name" :value="child.id">
									<span>{{ " - " + child.name }}</span>
								</el-option>
							</template>
						</template>
					</el-select>
				</el-form-item>
                <el-form-item label="菜单名字" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="editForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限编码" :label-width="formLabelWidth" prop="perms">
                    <el-input v-model="editForm.perms" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="路径" :label-width="formLabelWidth" prop="path">
                    <el-input v-model="editForm.path" placeholder="一级目录" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="图标" :label-width="formLabelWidth" prop="icon">
                    <el-input v-model="editForm.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
					<el-radio-group v-model="editForm.type">
						<el-radio :label=1>目录</el-radio>
						<el-radio :label=2>菜单</el-radio>
						<el-radio :label=3>按钮</el-radio>
					</el-radio-group>
				</el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialog = false">取 消</el-button>
                <el-button type="primary" @click="editMenu()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
      return {
        tableData: [{}],
        editDialog: false,
        addDialog: false,
        editForm: {},
        addForm: {},
        formLabelWidth: '80px',
        rules: {
            parentId: [
                { required: true, message: '上级不能为空', trigger: 'blur' }
            ],
            name: [
                { required: true, message: '名字不能为空', trigger: 'blur' }
            ],
            perms: [
                { required: true, message: '权限编码不能为空', trigger: 'blur' }
            ],
            type: [
                { required: true, message: '类型不能为空', trigger: 'blur' }
            ]
        },
        flag: false
      }
    },
    methods: {
        getMenuList() {
            this.$axios.get('menu/getAllMenuList').then(response => {
                this.tableData = response.data.data
            })
        },
        editMenu() {
            console.log(this.editForm)
        },
        addMenu() {
            this.$refs.addForm.validate(valid => {
                if (!valid) return
                this.$axios.post('menu/addMenu', this.addForm).then(response => {
                    if (response.data.code === 200) {
                        this.$message.success(response.data.message)
                        this.addDialog = false
                        this.$router.go(0)
                    } else {
                        this.$message.error(response.data.message)
                    }
                })
            })
        },
        addMonitor(value) {
            if (value == 0) {
                this.addForm.type = '1'
                this.flag = true
            } else {
                this.addForm.type = ''
                this.flag = false
            }
        },
        //解决禁用开启下拉框无法更新显示值
        addHandleChange(value) {
            if (value) {
                this.$set(this.addForm, this.addForm.type, value)
            } else {
                this.$set(this.addForm, this.addForm.type, '')
            }
        },
        delMenu(row) {
            this.$confirm('确定删除该菜单?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (row.child.length == 0) {
                    this.$axios.get('menu/delMenu/' + row.id).then(response => {
                        if (response.data.code === 200) {
                            this.$message.success(response.data.message)
                            this.$router.go(0)
                        } else {
                            this.$message.error(response.data.message)
                        }
                    })
                } else {
                    this.$message.error('请先删除子菜单')
                }
            }).catch(() => {});
        },
        getMenuInfo(id) {
            this.$axios.get('menu/getInfo/' + id).then(response => {
                this.editForm = response.data.data
                this.editDialog = true
            })
        },
        editMenu() {
            this.$refs.editForm.validate(valid => {
                if (!valid) return
                this.$axios.post('menu/updateMenu', this.editForm).then(response => {
                    if (response.data.code === 200) {
                        this.$message.success(response.data.message)
                        this.editDialog = false
                        this.$router.go(0)
                    } else {
                        this.$message.error(response.data.message)
                    }
                })
            })
        }
    },
    created() {
        this.getMenuList()
    }
}
</script>

<style scoped>
.demo-form-inline {
    float: left;
    height: 50px;
    margin-bottom: 10px;
}
</style>